<template>
  <div>
    <h1>订单↖(^ω^)↗</h1>
    <div style="padding-top: 20px">
      <el-button @click="orderExcel" type="primary">导出excel对账</el-button>
      <el-button @click="pdfd" type="primary">导出pdf</el-button>
    </div>
    <el-descriptions v-for="(o,index) in orderData" class="margin-top" title="订单"  :column="3" :size="size" border>
      <template slot="extra">
        <el-button @click="unfund(o.id)" v-if="o.state==2" type="primary" size="small">退款</el-button>
      </template>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-user"></i>
          订单号
        </template>
        <el-tag size="small">{{o.outTradeNo}}</el-tag>
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-location-outline"></i>
          商品
        </template>
        {{o.title}}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-tickets"></i>
          金额
        </template>
        <el-tag size="small">¥ {{o.price}}</el-tag>
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-office-building"></i>
          状态
        </template>
        <el-button v-if="o.state==1" type="success" plain>未支付</el-button>
        <el-button v-if="o.state==2" type="success" plain>已支付</el-button>
        <el-button v-if="o.state==3" type="success" plain>退款成功</el-button>
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-mobile-phone"></i>
          支付时间
        </template>
        {{o.updateTime}}
      </el-descriptions-item>
    </el-descriptions>
  </div>
</template>

<script>
export default {
  name: "OrderView",
  data(){
    return{
      size: '',
      orderData:[]
    }
  },methods:{
    orderList(){
      this.axios.post("http://localhost:8003/api/tb-goods/orderList").then(res=>{
        this.orderData=res.data
      })
    },orderExcel(){
      location.href="http://localhost:8003/api/tb-goods/orderExcel"
    },pdfd(){
      location.href="http://localhost:8003/api/tb-goods/pdfd";
    },unfund(id){
     // alert(id)
      this.axios.post("http://localhost:8003/api/tb-goods/unfund?id="+id).then(res=>{
        if(res.data=='success'){
          this.$message.success("退款成功");
          this.orderList()
        }
      })
    }
  },created() {
    this.orderList();
  }
}
</script>

<style scoped>

</style>